<template>
  <div>
    <!-- 导航 -->
    <van-nav-bar title="详情页">
      <template #left>
        <van-icon name="arrow-left" color="#4fc08d" />
        <span class="back" @click="back">返回</span>
      </template>
    </van-nav-bar>
    <!-- 详情 -->
    <!-- 商品图片 -->
    <van-image width="390" :src="img2" />
    <!-- 商品价格 -->
    <div class="priceall">
      <div class="price">￥{{ price }}起</div>
      <div class="origin-price">
        <s>{{ originprice }}</s>
      </div>
    </div>
    <!-- 米金 -->
    <van-image width="390" :src="require('../assets/imgs/米金.jpg')" />
    <!-- 商品标题 -->
    <div>
      <van-cell size="large" center>
        <template #title>
          <div class="title2">{{ title }}</div>
        </template>
        <template #label>
          <div class="label">
            [5月1号-5月15号 全版本闪降300元;
            购机享6期免息,信用卡分期至高立减200元;延保、碎屏保8折]
          </div>
        </template>
        <template #right-icon>
          <van-icon :name="require('../assets/imgs/分享.png')" size="26" />
        </template>
      </van-cell>
    </div>
    <!-- 描述 -->
    <div>
      <van-row>
        <van-col span="23" offset="1">
          <van-cell>
            <template #title>
              <div class="label1">{{ value1 }}</div>
            </template>
          </van-cell>
          <van-cell>
            <template #title>
              <div class="label1">{{ value2 }}</div>
            </template>
          </van-cell>
          <van-cell>
            <template #title>
              <div class="label1">{{ value3 }}</div>
            </template>
          </van-cell>
        </van-col>
        <!-- 按钮 -->
        <van-col>
          <van-cell is-link class="label2" round>
            <template #title>
              <div>{{ title }} 购机优选福利</div>
            </template>
          </van-cell>
        </van-col>
      </van-row>
    </div>
    <!-- 图标 -->
    <van-grid>
      <van-grid-item :icon="require('../assets/imgs/cpu.png')" :text="grid1" />
      <van-grid-item
        :icon="require('../assets/imgs/摄像头1.png')"
        :text="grid2"
      />
      <van-grid-item
        :icon="require('../assets/imgs/全屏幕.png')"
        :text="grid3"
      />
      <van-grid-item
        :icon="require('../assets/imgs/分辨率.png')"
        :text="grid4"
      />
      <van-grid-item />
    </van-grid>
    <!-- 底部商品导航 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-goods-action-icon icon="cart-o" text="购物车" to="/shopcart" />
      <van-goods-action-icon
        icon="star-o"
        v-if="flag1"
        text="收藏"
        @click="change"
      />
      <van-goods-action-icon
        icon="star"
        v-if="flag2"
        text="已收藏"
        color="#ff5000"
        @click="change"
      />
      <van-goods-action-button
        type="warning"
        text="加入购物车"
        @click="addCart(id)"
      />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import Tabbar from "../components/Tabbar.vue";
export default {
  name: "Detail",
  components: {
    Tabbar,
  },
  data() {
    return {
      id: this.$route.params.id,
      flag1: true,
      flag2: false,
      title: "",
      desc: "",
      price: "",
      img: "",
      img2: "",
      originprice: "",
      value1: "",
      value2: "",
      value3: "",
      grid1: "",
      grid2: "",
      grid3: "",
      grid4: "",
      value: false,
    };
  },
  mounted() {
    this.getshopbyid(this.id);
  },
  methods: {
    // 添加购物车
    addCart(id) {
      let data = {
        isCart: true,
      };
      this.$axios
        .get("/shops/" + id)
        .then((res) => {
          if (res.statusText == "OK") {
            if (res.data.isCart === true) {
              this.$toast("购物车已存在!");
            } else {
              this.$axios
                .patch("/shops/" + id, data)
                .then((res) => {
                  if (res.statusText == "OK") {
                    this.$toast("添加成功!");
                  } else {
                    console.log("出错了！");
                  }
                })
                .catch((err) => {
                  console.log(err);
                });
            }
          } else {
            console.log("出错了！");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 切换收藏
    change() {
      if (this.value === false) {
        this.flag2 = true;
        this.flag1 = false;
        this.value = true;
      } else {
        this.value = false;
        this.flag1 = true;
        this.flag2 = false;
      }
    },
    back() {
      // 返回
      this.$router.push({
        path: "/home",
      });
    },
    // 展示商品
    getshopbyid(id) {
      this.$axios
        .get("/shops/" + id)
        .then((res) => {
          if (res.statusText == "OK") {
            this.title = res.data.title;
            this.desc = res.data.desc;
            this.price = res.data.price;
            this.img = res.data.img;
            this.img2 = res.data.img2;
            this.originprice = res.data.originprice;
            this.value1 = res.data.value1;
            this.value2 = res.data.value2;
            this.value3 = res.data.value3;
            this.grid1 = res.data.grid1;
            this.grid2 = res.data.grid2;
            this.grid3 = res.data.grid3;
            this.grid4 = res.data.grid4;
          } else {
            console.log("获取详情数据失败");
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style scoped>
.body {
  background: #938f8fd0;
}
/* 标题 */
.title2 {
  font-size: 24px;
  height: 20px;
  margin-bottom: 10px;
}
/* 价格 */
.priceall {
  width: 390px;
  border-top: solid 1px;
  color: #fafafa;
}
/* 现价 */
.price {
  font-size: 30px;
  color: #ff6700;
  width: 140px;
  float: left;
}
/* 原价 */
.origin-price {
  margin-top: 10px;
  float: left;
  font-size: 26px;
  width: 230px;
  height: 40px;
  font-style: inherit;
  color: #b0b0b0;
}
/* 描述 */
.label {
  font-size: 14px;
  width: 320px;
}
/* 描述1 */
.label1 {
  font-size: 14px;
}
/* 描述2 */
.label2 {
  background: #ede1e1;
  border-radius: 20px;
  height: 40px;
}
</style>